<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery.js"></script>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">

    <style>
        *{
            margin:0px;
            padding:0px;
            box-sizing:border-box;
        }
        .box{
            font-size:14px;
            width:100%;
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        .wjmm{
            color:white;
            height:44px;
            line-height:44px;
            text-align:center;
            background:#312b2b;
        }
        .fhjt{
            position:absolute;
            left:10px;
            top:12px;
            width:20px;
            height:20px;
            vertical-align: center;
            background:url("../images/返回箭头.png");
            background-size:20px;
            display:block;
        }
        .zh{
            font-size:14px;
            border-bottom:1px solid #ccc;
            padding-bottom: 10px;
            margin-left:20px;
            margin-top:40px;
            margin-right:20px;
            background:none;
            position:relative;
        }
        .zh img{
            width:30px;
            position:absolute;
            left:2px;
            bottom:8px;
        }
        .sjh{
            border:none;
            background:none;
            outline:none;
            padding-left:40px;
        }
        #phoneerror{
            width:200px;
            height:10px;
            color:#cba274;
            font-size:12px;
            display:block;
            margin-left:60px;
        }
        .submitBtn{
            width:90%;
            height:40px;
            border-radius:5px;
            background:#ccc;
            color:white;
            text-align:center;
            line-height:40px;
            cursor:not-allowed;
            margin:0 auto;
            margin-top:40px;
        }
        .submitBtn_active{
            background:#312b2b;
            cursor:pointer;
        }


        .fs{
            width:75px;
            float:left;
            height:30px;
            background:#eee;
            border:none;
            text-align: center;
            margin-top:10px;
        }
        .clearfix:after{
            display:table;
            clear:both;
            content:"";
        }
        .hq{
            width:90%;
            height:60px;
            border-bottom:1px solid #ccc;
            position:relative;
            margin-left:20px;
        }
        .hq img{
            width:30px;
            position:absolute;
            left:2px;
            bottom:8px;
        }
        #yzm {
            padding-left:40px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            border: none;
            outline: none;
            background: none;
            margin-top: 20px;
            margin-right: 10px;
        }
        #yanzhengmaBtn{
            width:100px;
            height:40px;
            color:white;
            font-size:14px;
            background:#ccc;
            border:none;
            margin-top:20px;
        }
        #yzmerror{
            width:200px;
            height:10px;
            color:#cba274;
            font-size:12px;
            display:block;
            margin-left:40px;
        }
    </style>
</head>
<body>
<div class="box ">
    <div class="wjmm"><a href="javascript:history.back()" class="fhjt"></a><div class="box2">忘记密码</div></div>

    <div class="zh">
        <img src="../images/手机号码.png"/>
        <input class="sjh" placeholder="手机号" id="phone"/>
    </div>
        <span id="phoneerror"></span>

    <div class="hq clearfix">
        <img src="../images/验证码.png"/>
        <div class="fl">
            <input placeholder="请输入验证码" id="yzm"/>
        </div>

        <div class="fr">
            <input  type="button" value="获取验证码" id="yanzhengmaBtn" disabled/>
        </div>
        <span class="fl" id="yzmerror"></span>
    </div>

    <div class="submitBtn" id="submitBtn">下一步</div>

</div>
<script>

    var phoneReg =/^1[345789][0-9]{9}$/;
    var codeReg = /^[0-9]{6}$/;
    var timer;
    var t=60;



    var isPhoneRight = false;
    var isYZMRight = false;

    phone.onblur = function(){
        var phoneValue = phone.value;
        if(!phoneReg.test(phoneValue)){
            phoneerror.innerHTML ="手机号码格式有误！";
            isPhoneRight = false;
        }else{
            phoneerror.innerHTML = "";
            isPhoneRight =true;
        }
        checkAll();
    };
//检验验证码
    phone.onkeyup=function(){
        var phoneValue = phone.value;
        if(!phoneReg.test(phoneValue)){
            yanzhengmaBtn.setAttribute("disabled","disabled");
            yanzhengmaBtn.style.color="";
            isPhoneRight=false;
        }else{
            yanzhengmaBtn.removeAttribute("disabled");
            yanzhengmaBtn.style.background="#312b2b";
            isPhoneRight=true;
        }
        checkAll();
    };



    yanzhengmaBtn.onclick=function(){
        yanzhengmaBtn.value="重新发送60";

        timer=setInterval(daojishi,1000);
    };
    function daojishi(){
        t--;
        if(t==0){
            clearInterval(timer);
            yanzhengmaBtn.value="发送验证码";
            yanzhengmaBtn.removeAttribute("disabled");
            yanzhengmaBtn.style.color ="red";
            t=60;
            return;
        }
        yanzhengmaBtn.value="重新发送"+t;
    }
    yzm.onkeyup=function(){
        var yzmValue =yzm.value;
        if(yzmValue.length==0){
            yzmerror.innerHTML="请您填写验证码！";
            isYZMRight =false;
            checkAll();
            return;
        }
        if(!codeReg.test(yzmValue)){
            yzmerror.innerHTML ="验证码格式有误！";
            isYZMRight =false;
            checkAll();
            return;
        }
        $.ajax({
            url:"http://test.hfjava.com/shop/yzm",
            dataType:"jsonp",
            success:function(data){
                if(data.code!=yzmValue){
                    yzmerror.innerHTML="验证码错误！";
                    isYZMRight =false;
                }else{
                    yzmerror.innerHTML="验证码正确！";
                    isYZMRight =true;
                }
                checkAll();
            }
        });
    };

    function checkAll(){
        var isRight=isPhoneRight&&isYZMRight;

        if(isRight){
            submitBtn.removeAttribute("disabled");
            submitBtn.style.background ="#312b2b";
            submitBtn.onclick = function(){

                localStorage.setItem("currentPhone",phone.value);
                location = "重设密码.html";

            };
        }else{
            submitBtn.setAttribute("disabled","submitBtn_active");
            submitBtn.style.color ="";
        }
    }

</script>
</body>
</html>